<script setup lang="ts">
import { type ColProps } from "@arco-design/web-vue";
import { useI18n } from "vue-i18n";
import { onMounted, ref } from "vue";
import useLoginStroe from "@/stores/modules/useLoginStroe.ts";
import AccountSign from "@/pages/Login/components/AccountSign.vue";
import PhoneSign from "@/pages/Login/components/PhoneSign.vue";

const { setCode, getIsAccountOrPhone, setIsCode } = useLoginStroe();

const { t } = useI18n();

const title = document.title;

const labelColProps: ColProps = {
  span: 0,
};

const wrapperColProps: ColProps = {
  span: 24,
};

onMounted(() => {
  setCode();
  setIsCode(false);
});
</script>

<template>
  <div class="login">
    <div class="login-box">
      <div class="login-box-logo">
        <img
          width="100%"
          src="@/assets/login/login-logo.png"
          alt=""
        >
      </div>
      <div class="login-box-form">

        <h3>
          <p>{{ t('login.title') }}</p>
          <!-- <span>{{ title }}</span> -->
          <span v-html="title"></span>
        </h3>
        <div class="login-box-form-box">
          <AccountSign
            v-if="getIsAccountOrPhone()"
            :label-col-props="labelColProps"
            :wrapper-col-props="wrapperColProps"
          />
          <!-- <div > -->
          <PhoneSign
            v-else
            :label-col-props="labelColProps"
            :wrapper-col-props="wrapperColProps"
          />
          <!-- </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.login {
  width: 100%;
  height: 100vh;
  background: url("@/assets/login/login-background.jpg") no-repeat center center
    fixed;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  &-box {
    width: 900px;
    height: 500px;
    background: radial-gradient(
      closest-corner,
      rgba(0, 0, 255, 0.53) 0%,
      rgba(170, 229, 234, 0.62) 100%
    );
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    border: 6px solid rgba(170, 229, 234, 0.62);
    display: flex;
    align-items: center;
    justify-content: center;
    &-logo {
      width: 50%;
    }
    &-form {
      height: 100%;
      flex: 1;
      padding: 20px 30px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      p {
        text-align: left;
        padding: 0;
        margin: 0;
        color: rgba(255, 255, 255, 0.62);
      }
      h3 {
        text-align: center;
        color: #fff;
      }
      &-box {
        //flex: 1;
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>